<template>
    <div id="app" class="bg">
        <Meta pagealias="freelancesubjectlist" />
        <Head>项目需求</Head>
        <div class="searchdiv" @click="toggleSearch">
            <img src="../../assets/freelance/images/resumelist_03.png"/>
            <span :class="params.keyword ? 'isnull' : ''">{{ params.keyword ? params.keyword : "请输入关键字"}}</span>
        </div>
        <van-popup
        v-model="show"
        position="top"
        :overlay="true"
        :style="{ height: '90%', width: '100%' }"
        >
            <TopSearch
                type="lgproject"
                @hideSearch="toggleSearch"
                @doSearch="doSearchByKeyword"
            ></TopSearch>
        </van-popup>
        <van-list class="list"
         v-if="list.length>0"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in list" :key="index" @click="prodetails(item.id)">
                <div class="title">
                    <div class="namecen">{{item.title}}</div>
                    <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                </div>
                <div class="orders">去接单</div>
                <div class="info">
                    <div class="box">
                        <div class="money">￥{{item.price}}</div>
                        <div>预算价格</div>
                    </div>
                    <div class="box day">
                        <div class="day">{{item.period}}</div>
                        <div>预计工期</div>
                    </div>
                    <div class="box">
                        <div class="date">{{item.endtime}}</div>
                        <div>接单截止</div>
                    </div>
                </div>
                <div class="claim">要求：{{item.desc}}</div>
            </div>
        </van-list>
        <Datanull class="null" v-else></Datanull>
        <Foodmenu></Foodmenu>
    </div>
</template>
<script>
import { obj2Param } from '@/utils/index'
import Foodmenu from '@/components/freelance/Foodmenu'
import Datanull from '@/components/freelance/datanull'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    Foodmenu,
    Datanull
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      show: false,
      page: 1,
      pagesize: 15,
      params: {
        keyword: ''
      },
      list: []
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (to.name === 'freelanceproject') {
        // 将地址栏中的url参数初始化到参数对象中
        this.initQuery(to.query)
        this.fetchData(true)
      }
    }
  },
  created () {
    this.initQuery(this.$route.query)
    this.fetchData(true)
  },
  methods: {
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    },
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 关键词搜索函数，重置所有参数，并且把当前页设置为第一页
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/freelance/project' + obj2Param(this.params, '?'))
    },
    toggleSearch () {
      this.show = !this.show
    },
    prodetails (id) {
      this.$router.push('/freelance/project/' + id)
    },
    fetchData (init) {
      let conditions = {
        key: this.params.keyword
      }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.subject_list, conditions)
        .then(res => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.bg{
    width: 100vw;
    height: 100vh;
    // background-image: linear-gradient(to bottom, #f5fafe , #ffffff);
    .searchdiv{
        height: 36px;
        margin: 17px 21px 0px 21px;
        border-radius: 50px;
        border: 1px solid #d0d0d0;
        display: flex;
        align-items: center;
        img{
            margin-left: 11px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
        }
        span{
            color: #b4bdc9;
            font-size: 15px;
            &.isnull{
                color: #333333;
            }
        }
    }
    .list,.null{
        height: calc(100vh - 60px - 50px - 55px);
        overflow: auto;
        margin-top: 10px;
        .item{
            padding-top: 15px;
            position: relative;
            border-left: 21px solid #ffffff;
            border-right: 21px solid #ffffff;
            border-bottom: 1px solid #ecedf2;
            .title{
                height: 25px;
                display: flex;
                align-items: center;
                position: relative;
                .namecen{
                    max-width: calc(100vw - 21px - 68px - 26px);
                    font-size: 18px;
                    color: #333333;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                img{
                    margin-left: 6px;
                    width: 15px;
                    height: 15px;
                }
            }
            .orders{
                width: 62px;
                height: 25px;
                font-size: 15px;
                color: #232220;
                position: absolute;
                top:15px;
                right: -21px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #ffdb67;
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                box-shadow: 0px 1px 7px rgba($color: #ffdb67, $alpha: 0.8);
            }
            .info{
                margin-top: 15px;
                display: flex;
                font-size: 15px;
                color: #bdbdbd;
                .box{
                    flex: 1;
                    text-align: center;
                    line-height: 1;
                    &.day{
                        border-left: 1px dashed #d5d5d5;
                        border-right: 1px dashed #d5d5d5;
                    }
                    .money{
                        font-size: 17px;
                        margin-bottom: 15px;
                        color: #ff4e00;
                    }
                    .day,.date{
                        color: #555555;
                        margin-bottom: 15px;
                    }
                }
            }
            .claim{
                margin-top: 15px;
                margin-bottom: 15px;
                font-size: 15px;
                color: #555555;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
    .list::-webkit-scrollbar{
        display: none;
    }
}
</style>
